<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
                /* 六个状态 */
                /* 由于之前设置了name属性，所以样式的前缀会被替换为move- */
                /* 4.添加六种状态 */
                .move-enter {
                    margin-left: 200px;
                    opacity: 0;
                }
                .move-enter-active {
                    transition: all 1s;
                }
                .move-enter-to {
                    margin-left: 0;
                    opacity: 1;
                }
                .move-leave {
                    margin-left: 0;
                    opacity: 1;
                }
                .move-leave-active {
                    transition: all 1s;
                }
                .move-leave-to {
                    margin-top: 200px;
                    opacity: 0;
                }
            </style>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">

            
            <input type="button" value="anniu" @click='isshow = !isshow'>
            <transition name="move">
                <p v-if='isshow'>啦啦啦啦啦</p>
            </transition>

        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    isshow : true,
                }
            })
        </script>
    </body>
</html>